import { Tabbar } from '@nutui/nutui-react-taro';
import { Footprint } from '@nutui/icons-react-taro';
import { Home } from '@nutui/icons-react-taro';
import { Date } from '@nutui/icons-react-taro';
import { My } from '@nutui/icons-react-taro';
import { useSnapshot } from 'valtio';
import { pxTransform } from '@tarojs/taro';
import { switchTab } from '@tarojs/taro';
import state from './state';
import './index.scss';

const {
  TARO_APP_COLOR,
} = process.env;

const icons = [<Home size={pxTransform(18)} />,
  <Footprint size={pxTransform(18)} />,
  <Date size={pxTransform(18)} />,
  <My size={pxTransform(18)} />];

const items = [
  { url: 'pages/index/index1', text: '首页', icon: icons[0] },
  { url: 'pages/index/index2', text: '资源', icon: icons[1] },
  { url: 'pages/index/index3', text: '任务', icon: icons[2] },
  { url: 'pages/index/index4', text: '我的', icon: icons[3] }];

const CustomTabBar = () => {
  const snap = useSnapshot(state);
  return (<Tabbar
    value={snap.selected}
    activeColor={TARO_APP_COLOR}
    safeArea={!0}
    fixed={!0}
    onSwitch={(value) =>
      switchTab({ url: `/${items[value || 0]['url']}` })
        .then(() => (state.selected = value))}>
    {items.map(({ text, icon }, key) =>
      <Tabbar.Item key={key} title={text} icon={icon} />)}
  </Tabbar>);
};

CustomTabBar.options = {
  addGlobalClass: !0,
};

export default CustomTabBar;
